<template>
  <div class="dialogProductReview">
    <el-dialog :visible.sync="dialogVisible" width="696px" title="产品模板示例预览" center>
      <div class="content" v-html="htmlContent">
      </div>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="mini">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "DialogProductReview",
        data() {
            return {
                dialogVisible: false,
                htmlContent: ''
            }
        },
        computed: {
            ...mapState(['common'])
        },
        methods: {
            init(htmlContent) {
                let waitContent = htmlContent;
                //替换指定内容 - 虚拟数据源
                const template = {
                    productEname:'product English name',
                    productName: "开启订制束口袋环保袋帆布定制",
                    productModel: "init bag canvas for bespoke",
                    specificationName: '竖款25*20CM现货白色',
                    productTypeName: '时尚手提袋',
                    minimum:'100 件',
                    productSpecification:'春秋时尚旅行袋',
                    productUnitName:'件',
                    hsCode:'4202220000',
                    'productSpec.offshorePrice':'180 USD',
                    'productSpec.unitPrice':'380 USD',
                    'productSpec.samplePrice':'399 USD',
                    'productSpec.sampleNumber':'10 件',
                    'productSpec.firstPrice':'409 USD',
                    'productSpec.firstNumber':'100 件',
                    'productSpec.secondPrice':'407 USD',
                    'productSpec.secondNumber':'150 件',
                    'productSpec.packageVolume':'3.5 m³',
                    'productSpec.packageNumber':'10 件',
                    'productSpec.packingUnit':'件',
                    'productSpec.productWeight':'7.5 kg',
                    'productSpec.packagingGrossWeight':'7.8 kg',
                    'productSpec.outerBoxLong':'150 cm',
                    'productSpec.outerBoxWidth':'100 cm',
                    'productSpec.outerBoxHigh':'100 cm',
                    'productSpec.packageInstruction':'帆布袋定做可印logo棉布袋手提袋订制束口袋环保袋帆布定制'
                }
                this.common.columnList.map(item => {
                    const index = waitContent.indexOf(item.title);
                    if (index != -1) {//找到啦 - 替换内容
                        let content = item.title;
                        let target='';
                        content = content.substring(1, content.length - 1);
                        if (content == '产品图片') {
                            const url = require('../../../public/img/demoPro.png');
                            target = `<img src="${url}" style="width: 180px;padding:15px;margin: 0 auto;display: block" alt="示例图片">`;
                        } else {
                            target = template[item.column];
                        }
                        waitContent= waitContent.replace(new RegExp(content, 'g'), target);
                    }
                })
                waitContent= waitContent.replace(/\[/g, " ");
                waitContent= waitContent.replace(/\]/g, " ");
                this.htmlContent = waitContent;
                this.dialogVisible = true;
            },
        }
    }
</script>

<style scoped lang="scss">
  .dialogProductReview {
    .el-dialog__body {
      .content {
        border: 1px solid #dddddd54;
        padding: 10px;
        max-height: 500px;
        overflow-y: scroll;
       #temp-table-pro{
          margin: 10px auto;
        }
      }
    }
  }

</style>
